﻿@page "/docs/extensions/list-view"

<Seo Canonical="/docs/extensions/list-view" Title="Blazorise List View component" Description="Learn to use and work with the Blazorise ListView component, a flexible and powerful component for displaying a series of content in a contained scrollable view by providing a data source." />

<DocsPageTitle Path="Extensions/List View">
    Blazorise List View component
</DocsPageTitle>

<DocsPageLead>
    List views are a flexible and powerful component for displaying a series of content in a contained scrollable view by providing a data source.
</DocsPageLead>

<DocsPageParagraph>
    <LicenseLimitationAlert LimitText="@($"{Licensing.BlazoriseLicenseProvider.DEFAULT_UNLICENSED_LIMIT_LISTVIEW_MAX_ROWS} items")" />
</DocsPageParagraph>

<DocsPageParagraph>
    List views use <Code>ListGroup</Code> behind the covers, so you may make use of the <Code>ListGroup</Code> underlying APIs.
</DocsPageParagraph>

<DocsPageSubtitle>
    Examples
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="Basic">
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <BasicListViewExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="BasicListViewExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Selectable items">
        Set the <Code>ListView</Code> <Code>Mode</Code> to <Code>ListGroupMode.Selectable</Code>.
        Bind <Code>SelectedItem</Code> and provide <Code>TextField</Code> to setup the display text and <Code>ValueField</Code> to uniquely identify the current active selection.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <ListViewSelectableExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="ListViewSelectableExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Extending with custom item content">
        Customize the way you display the <Code>ListView</Code> items by providing <Code>ItemTemplate</Code>.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <ListViewItemTemplateExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="ListViewItemTemplateExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Styling Individual Items">
        Customize the look of each item by using the right callbacks.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <ListViewStylingIndividualItemsExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="ListViewStylingIndividualItemsExample" />
</DocsPageSection>

<ComponentApiDocs ComponentTypes="[typeof(ListView<> )]" />